<template>
  <div id="main">
    <div id="box">
      <div id="canvasBox"></div>
    </div>
    <div id="table">
      <table>
        <tr>
          <th>S/N</th>
          <th>指令号</th>
          <th>车牌号</th>
          <th>分供方</th>
          <th>司机</th>
          <th>联系电话</th>
          <th>计划抵达时间</th>
          <th>状态</th>
        </tr>
        <tr v-for="(item,key) in tableList">
          <td>{{key+1}}</td>
          <td>{{item.A1}}</td>
          <td>{{item.A2}}</td>
          <td>{{item.A3}}</td>
          <td>{{item.A4}}</td>
          <td>{{item.A5}}</td>
          <td>{{item.A6}}</td>
          <td>{{item.A8}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script type="text/javascript">
   function load(){

    let boxObj = document.getElementById('box');
    let canvasBox = document.getElementById('canvasBox');

    let boxW = boxObj.offsetWidth;
    let boxH = boxObj.offsetHeight;

    canvasBox.style.width  = boxW+'px';
    canvasBox.style.height = boxH+'px';

    let box = echarts.init(canvasBox);
    let option1 = {
      title: {
        x: 'center',
        text: '配送',
        textStyle: {
          color: '#fff',
          fontSize: '30'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
            fontSize: '30'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      color: ['#5086d6', '#f67c2b', '#a5a5a5'],
      legend: {
        bottom: 10,
        left: 'center',
        data: ['发运数', '在途数', '运抵数', '配送及时率'],
        textStyle: {
          color: '#fff'
        }
      },
      xAxis: [
        {
          type: 'category',
          data: ['11-1', '11-2', '11-3', '11-4', '11-5'],
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '数量',
          min: 0,
          max: 60,
          interval: 6,
          axisLabel: {
            formatter: '{value} 次',
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#464646'
            }
          }
        },
        {
          type: 'value',
          name: '比率',
          min: 0,
          max: 100,
          interval: 10,
          axisLabel: {
            formatter: '{value} %',
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#464646'
            }
          }
        }
      ],
      series: [
        {
          name: '发运数',
          type: 'bar',
          data: [50, 55, 40, 59, 49],
          barGap: 0,
          itemStyle: {
            normal: {
              label: {
                show: true,
              }
            }
          }
        },
        {
          name: '在途数',
          type: 'bar',
          data: [40, 32, 45, 50, 60],
          barGap: 0,
          itemStyle: {
            normal: {
              label: {
                show: true,
              }
            }
          }
        },
        {
          name: '运抵数',
          type: 'bar',
          data: [10, 15, 25, 45, 50],
          barGap: 0,
          itemStyle: {
            normal: {
              label: {
                show: true,
              }
            }
          }
        },
        {
          name: '配送及时率',
          type: 'line',
          yAxisIndex: 1,
          data: [80, 100, 80, 71, 90],
          itemStyle: {
            normal: {
              label: {
                show: true,
                formatter: '{c}%'
              },
              lineStyle: {
                color: '#ffc000'
              }
            }
          }
        }
      ]
    };
    box.setOption(option1);
  }


  export default {
    name : 'three',
    data(){
      return {
        tableList:[
          {long:'1-10',A1:31131877,A2:'粤B88888',A3:'中联物流',A4:'张卫国',A5:'18380464447',A6:'2017-11-09 9:40:30',A8:'正常离场'},
          {long:'1-10',A1:31131878,A2:'粤B88688',A3:'中联物流',A4:'邓家',A5:'13632845413',A6:'2017-11-09 9:40:30',A8:'正常离场'},
          {long:'1-10',A1:31131879,A2:'粤B42789',A3:'中联物流',A4:'薛贵',A5:'15924836214',A6:'2017-11-09 9:40:30',A8:'正常离场'},
          {long:'1-10',A1:31131880,A2:'粤B78456',A3:'中联物流',A4:'党新',A5:'17812346985',A6:'2017-11-09 9:40:30',A8:'正常离场'},
          {long:'1-10',A1:31131881,A2:'粤B99234',A3:'中联物流',A4:'李二狗',A5:'14732587456',A6:'2017-11-09 9:40:30',A8:'正常离场'},
          {long:'1-10',A1:31131882,A2:'粤BAS896',A3:'中联物流',A4:'王显',A5:'13554136845',A6:'2017-11-09 9:40:30',A8:'正常离场'},
          {long:'1-10',A1:31131883,A2:'粤B8HJ23',A3:'中联物流',A4:'欧阳成',A5:'18380464447',A6:'2017-11-09 9:40:30',A8:'正常离场'},
          {long:'1-10',A1:31131884,A2:'粤B8XC88',A3:'中联物流',A4:'上官平',A5:'18380464447',A6:'2017-11-09 9:40:30',A8:'正常离场'},
        ]
      }
    },
    created: function(){

    },
    mounted: function(){
        load();
    },
    methods : {
    }
  }

</script>

<style type="text/css" scoped="true">
  #main {
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    height: 100%;
    width: 100%;
  }
  #box{
    -webkit-box-flex: 1 ;   /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;       /* OLD - Firefox 19- */
    -webkit-flex: 1;        /* Chrome */
    -ms-flex: 1 ;            /* IE 10 */
    flex: 1;
    background-image: -webkit-radial-gradient(#737373,#2b2b2b);
    background-image: radial-gradient(#737373,#2b2b2b);
  }
  #table{
    -webkit-box-flex: 1 ;   /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;       /* OLD - Firefox 19- */
    -webkit-flex: 1;        /* Chrome */
    -ms-flex: 1 ;            /* IE 10 */
    flex: 1;
    margin-top: 15px;
  }
  table{
    width: 100%;
    border-collapse:collapse;
  }
  th{
    background-color: #bdd7ee;
  }
  th,td{
    border: 1px solid #000;
    text-align: center;
    padding: 10px 0;
  }
</style>

